<template>
  <div class="page-modal">
    <div class="modal-wrap">
      <div class="title-logo">{{ `【${name}详情】` }}</div>
      <CommonPreviewModal
        :formKey="formKey"
        :formData="formData"
        :option="option"
      />
      <template v-if="dimensionCodeIdValue">
        <div class="title-logo">【维值列表】</div>
        <DemensionValue
          :dimensionCodeIdValue="dimensionCodeIdValue"
          :idValue="idValue"
          :userIdValue="userIdValue"
        />
        <div></div>
      </template>
      <div class="title-logo">{{ `【${name}评审】` }}</div>
      <a-form-model
        layout="horizontal"
        ref="ruleForm"
        :model="commentForm"
        :rules="rules"
        :label-col="labelCol"
        class="content"
      >
        <a-form-model-item
          v-for="(item, index) in newFormKey"
          :key="index"
          :label="item.title"
          :prop="item.key"
        >
          <template v-if="item.view === 'sel_select'">
            <a-select
              :value="commentForm[item.key]"
              show-search
              placeholder="请选择"
              style="width: 100%"
              @change="(e) => onChange(e, item.key)"
            >
              <a-select-option
                v-for="key in commentOption"
                :key="key.id"
                :value="key.value"
              >
                {{ key.label }}
              </a-select-option>
            </a-select>
          </template>
          <template v-else-if="item.view === 'textarea'">
            <a-textarea
              placeholder="请输入"
              :value="commentForm[item.key]"
              @change="(e) => onChange(e.target.value, item.key)"
              :autoSize="{ minRows: 3, maxRows: 6 }"
            />
          </template>
          <template v-else>
            <a-input
              disabled
              placeholder="评审时间，保存时自动填入"
              :value="commentForm[item.key]"
              @change="(e) => onChange(e.target.value, item.key)"
            ></a-input>
          </template>
        </a-form-model-item>
      </a-form-model>
      <div class="msg">备注：评审时间，无需手动填写，保存时自动录入。</div>
    </div>
    <div class="my-btn">
      <a-button type="primary" @click="submit">保存</a-button>
      <a-button @click="offModal">取消</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import CommonPreviewModal from "@/components/common/common-preview-modal.vue";
import DemensionValue from "@/views/ModalValueManagement/modalValueManagement";
const props = defineProps({
  commentForm: {
    type: Object,
  },
  formKey: {
    type: Array,
  },
  option: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  typePage: {
    type: Number,
    default: 0,
  },
  srcUrl: {
    type: String,
    default: "",
  },
  userIdValue: {
    type: String,
    default: "",
  },
  idValue: {
    type: String,
    default: "",
  },
  dimensionCodeIdValue: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    default: "",
  },
});
const labelCol = {
  style: {
    width: "120px",
    whiteSpace: "nowrap",
  },
};
const ruleForm = ref(null);
const commentOption = [
  {
    label: "通过",
    value: "1",
  },
  {
    label: "不通过",
    value: "0",
  },
];
const newFormKey = [
  {
    title: "评审状态",
    view: "sel_select",
    key: "comment_status",
  },
  {
    title: "评审时间",
    view: "input",
    key: "comment_time",
  },
  {
    title: "评审意见",
    view: "textarea",
    key: "comment_text",
  },
];
const emit = defineEmits([
  "updateFormData",
  "offModalOperation",
  "submitModal",
]);
function onChange(value, key) {
  emit("updateFormData", key, value);
}

const rules = {
  comment_status: [{ required: true, message: "请选择", trigger: "change" }],
};
function submit(e) {
  e.preventDefault();
  ruleForm.value.validate((valid) => {
    if (valid) {
      emit("submitModal");
    }
  });
}
function offModal() {
  emit("offModalOperation");
}
</script>
<style scoped lang="less">
.page-modal {
  width: 100%;
}
.modal-wrap {
  width: 100%;
  max-height: 505px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10px;
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
.my-btn {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 40px;
}
.msg {
  font-size: 11px;
  padding-left: 25px;
}
/deep/ .ant-row.ant-form-item.ant-form-item-with-help {
  margin-bottom: 0;
}
/deep/ .ant-row.ant-form-item {
  margin-bottom: 22px;
}
/deep/ .ant-input[disabled] {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.65);
}
textarea {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
/deep/ .ant-row.ant-form-item.ant-form-item-with-help {
  margin-bottom: 0;
}

/deep/ .ant-row.ant-form-item {
  margin-bottom: 5px;
  display: flex;
}
/deep/ .ant-col.ant-form-item-control-wrapper {
  flex: 1;
  word-break: break-all;
}

.title-logo {
  color: #000;
  font-size: 15px;
  font-weight: 600;
}
</style>
